/*ruVZMbxuPLdqW7vaaQRGlxvtn9JktTxm1Ilyz+HTd9xl170GdEigH5v0//3ARl8n*/
import React,{Component} from 'react';
import {base} from 'nc-lightapp-front';
import './Dialog.less';
const{NCRow,NCCol,NCButton} = base;
var createComp = function(name){

}
const EMPTY_FUNC = ()=>{}
export default class MsgDialog extends Component{

    componentWillReceiveProps(newProps){
        var updateProps = {
            show: newProps.show,
            compName: newProps.compName
        };
        this.setState({...updateProps});
    }
    constructor(props){
        super(props);
        this.listener = this.props.listener || {};
        this.state = {
            showDialog: this.props.showDialog || false,
            style: {
                width: '30%',
                height: '30%'
            },
            title: this.props.title || this.Lang['10140SUG-000077'],/* 国际化处理： 询问*/
            content: this.props.content || EMPTY_FUNC,
            buttons: {
                sure: {
                    name: this.Lang['10140SUG-000074'],/* 国际化处理： 确认*/
                    key: 'sure',
                    style: {backgroundColor: '#E14C46', color: '#fff'},
                    action: () => {
                        this.closeOk();
                    },
                },
                cancel: {
                    name: this.Lang['10140SUG-000004'],/* 国际化处理： 取消*/
                    key: 'cancel',
                    style: {backgroundColor: '#eee', color: '#666', marginLeft: '9px'},
                    action: () => {
                        this.close();
                    },
                }
            }
        };
    }
    renderFooterButtons = ()=>{
        /**
         * 渲染默认按钮
         */
        const renderDefaultButton = ()=>{
            if(this.state.buttons){
                return Object.values(this.state.buttons).map((button)=>{
                    return <NCButton style={button.style} onClick={button.action} fieldid = {button.key||button.name}>{button.name}</NCButton>
                })
            }
        }
        return (
            <NCRow style={{'margin-left':'auto','margin-right':'auto'}}>
                <NCCol xs={12} md={12} sm={12}>
                    {renderDefaultButton.call(this)}
                </NCCol>
            </NCRow>
        )
    }
    closeOk = ()=>{
        (this.state.onBeforeSureClick
        && typeof this.state.onBeforeSureClick ==='function')?
        this.state.onBeforeSureClick.call(this,this.closeDialog.bind(this,this.state.listener.onAfterSureClick)):
            this.closeDialog(this.state.listener.onAfterSureClick?this.state.listener.onAfterSureClick:null);
    }
    close = ()=>{
        (this.state.onBeforeCancelClick
        && typeof this.state.onBeforeCancelClick ==='function')?
        this.state.onBeforeCancelClick.call(this,this.closeDialog.bind(this,this.state.listener.onBeforeCancelClick)):
        this.closeDialog(this.state.listener.onBeforeCancelClick?this.state.listener.onBeforeCancelClick:null);
    }
    closeDialog =(after)=>{
        this.setState({showDialog:false},()=>{
            after && typeof after === 'function' && after();
        });
    }
    showDialog = (config)=>{
        let param = {showDialog:true};
        if(config){
            param.content = config.content;
            param.title = config.title;
            if(config.listener){
                param.listener = config.listener;
            }
        }
        this.setState(param);
    }

    render(){
        return(
            <div
                className="refer-pop-window"
                style={{ display: this.state.showDialog ? 'flex' : 'none','z-index':'999999' }}
                onMouseOver={(e) => {e.stopPropagation();}} fieldid="selfMsgDialog_modal-area">
                <div
                    className="refer-popover clearfix"
                    ref={(dom) => {this.popover = dom;}}
                    onClick={(e) => {e.stopPropagation();}}
                    style={{width:this.state.style.width,height:this.state.style.height,}}>
                    <div className="refer-header">
                        <div className="refer-title" key="1" fieldid={this.state.title|| ''+"_title"}>
                            {this.state.title|| ''}
                        </div>
                        <div className="refer-header-extend" key="2"/>
                        <div className="refer-close iconfont icon-guanbi" onClick={this.close} key="5" />
                    </div>
                    {/*渲染内容区*/}
                    <div className='refer-content-area ncc-hr-dialog-content-area0' style={{ width: '100%', 'overflow':'auto'}}>
                        {this.state.content}
                    </div>
                    {/*渲染bottom确认和取消按钮*/}
                    <div className="loading-container">
                        <div className="refer-buttom" style={{textAlign:'right'}}>
                            <div className="buttons" style={{width:'100%'}} key="3">
                                {this.renderFooterButtons()}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

/*ruVZMbxuPLdqW7vaaQRGlxvtn9JktTxm1Ilyz+HTd9xl170GdEigH5v0//3ARl8n*/
